﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MasterPage.Master" Inherits="System.Web.Mvc.ViewPage<FrasesSimpsonsMvc.Models.Frases>" %>
<%@ Import Namespace="FrasesSimpsonsMvc.Views" %>

<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">Editar <%= Model.DescripcionCorta %></asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

	<% Html.RenderPartial("SearchCleanUserControl"); %>

	<div class="row-responsive">
		<ul class="breadcrumb">
			<li>
				<a href="<%= Url.Action("Index", "Home") %>">Home</a> <span class="divider">/</span>
			</li>
			<% if (Model.Capitulos != null) { %>
			<li>
				<span class="label label-success tall"><a class="label-link" href="<%= Url.Action("Detail", "Temporada", new { Id = Model.Capitulos.Temporadas.Id}) %>">Temporada <%= Model.Capitulos.Temporadas.Numero %></a></span> <span class="divider">/</span>
			</li>
			<li>
				<span class="label label-inverse tall"><a class="label-link" href="<%= Url.Action("Detail", "Capitulo", new { Id = Model.Capitulos.Id }) %>">Capítulo <%= Model.Capitulos.Numero %></a></span> <span class="divider">/</span>
			</li>
			<% } %>
			<li>
				<a href="<%= Url.Action("Detail", "Frase", new { Id = Model.Id}) %>"><%= Model.DescripcionCorta %></a> <span class="divider">/</span>
			</li>
			<li class="active">Editar</li>
		</ul>
	</div>

	<script type="text/javascript">
		function pad2(number) {
			return (number < 10 ? '0' : '') + number
		}
		$(document).ready(function () {
			$("#SubmitForm").submit(function () {
				if ($('#Descripcion').val() == "") {
					$("#Descripcion").focus();
					$("#tituloFieldset").addClass("error");
					jQuery('html,body').animate({ scrollTop: jQuery('#tituloFieldset').offset() }, 1000);
					return false;
				}
				$('#LinkImagenes option').each(function () {
					$(this).attr("selected", "selected");
				});
				$('#LinkVideos option').each(function () {
					$(this).attr("selected", "selected");
				});
			});
			$("#add-video").click(function () {
				if ($('#NuevoVideo').val() != '') {
					$('#LinkVideos').append($('<option></option>').val($('#NuevoVideo').val())
											  .html($('#NuevoVideo')
											  .val()));
				}
				$('#NuevoVideo').val('');
			});
			$("#delete-video").click(function () {
				$('#LinkVideos :selected').each(function () { $(this).remove(); });
			});
			$("#add-imagen").click(function () {
				if ($('#NuevaImagen').val() != '') {
					$('#LinkImagenes').append($('<option></option>').val($('#NuevaImagen').val())
								  .html($('#NuevaImagen')
								  .val()));
				}
				$('#NuevaImagen').val('');
			});
			$("#delete-imagen").click(function () {
				$('#LinkImagenes :selected').each(function () { $(this).remove(); });
			});
			$("#Dialogo").keypress(function (event) {
				if (event.which == 13) {
					$("#Dialogo").val( $("#Dialogo").val() + "|");
				}
			});
			$("#Tiempo").keypress(function (event) {
				if (event.which < 48 || event.which > 57) {
					event.preventDefault();
				}
				else {
					var num = $("#Tiempo").val() + String.fromCharCode(event.which);
					$("#tiempo-mostrable").html("" + pad2(parseInt(num / 60)) + ":" + pad2(num % 60));
				}
			});
			<% if (Model.Tiempo != null) { %>
			$("#tiempo-mostrable").html("" + pad2(parseInt(<%= Model.Tiempo %> / 60)) + ":" + pad2(<%= Model.Tiempo %> % 60));
			<% } %>
		})
	</script>

	<form method="post" id="SubmitForm" action="<%= Url.Action("Save", "Frase") %>">

		<div class="row-fluid">
			<div class="span6">
				<h2>Editar frase</h2>

				<input type="hidden" name="Id" value="<%= Model.Id %>" />

				<div class="form-inline top-space">
				<h3>Titulo&nbsp;<span class="label label-important">requerido</span></h3>
				</div>
				<fieldset class="control-group" id="tituloFieldset">
				<input name="Descripcion" value="<%= Model.Descripcion %>" type="text" id="Descripcion" class="span10"/>
				</fieldset>

				<h3>Dialogo <i class="icon-info-sign popover-help" data-content="La | -barrita horizontal- se usa para separar lineas, para tu conveniencia se agregan automaticamente cuando aprentas enter." data-original-title="Ayuda"></i></h3>
				<textarea name="Dialogo" id="Dialogo" class="span10" rows="8" cols="3"><%= Model.Dialogo %></textarea>
				
				<h3>Personajes <i class="icon-info-sign popover-help" data-content="Por el momento no se pueden editar los personajes." data-original-title="Ayuda"></i></h3>
				<% foreach (var personaje in Model.Personajes) { %>
				<span class="label label-info tall"><%= personaje.Nombre %></span>
				<% } %>
				<% if (Model.Personajes.Count == 0) { %>
				<span class="label tall">Sin personajes</span>
				<% } %>
						
				<h3 class="top-space-mini">Keywords <i class="icon-info-sign popover-help" data-content="Las keyworkds son palabras que ayuden a la gente a buscar la frase. Separalas por espacios. No hace falta incluir cosas del titulo o la descripción." data-original-title="Ayuda"></i></h3>
				<input name="Keywords" value="<%= Model.Keywords %>" type="text" class="span5"/>

				<h3>Capitulo</h3>
				<%= Html.DropDownList("CapituloId", ViewData["Capitulos"] as IEnumerable<SelectListItem>, "Sin capitulo", new { @class = "span10" })%>

			</div>

			<div class="span6 pull-right">

				<h3>Videos <i class="icon-info-sign popover-help" data-content="Corta y pega la url, por ejemplo de youtube y hace click en agregar." data-original-title="Ayuda"></i></h3>
				<div class="input-append">
					<input type="text" id="NuevoVideo" /><input class="btn btn-success" type="button" value="Agregar" id="add-video" />
					<input  class="btn btn-danger" type="button" value="Borrar" id="delete-video" />
				</div>
				<%= Html.ListBox("LinkVideos", ViewData["LinkVideos"] as IEnumerable<SelectListItem>, new { @class = "span10" })%>

				<h3>Imagenes <i class="icon-info-sign popover-help" data-content="Corta y pega la url de la imagen y hace click en agregar y no suban imagenes de imageshack por que no se suelen ver." data-original-title="Ayuda"></i></h3>
				<div class="input-append">
					<input type="text" id="NuevaImagen" /><input class="btn btn-success" type="button" value="Agregar" id="add-imagen" />
					<input class="btn btn-danger" type="button" value="Borrar" id="delete-imagen" />
				</div>
				<%= Html.ListBox("LinkImagenes", ViewData["LinkImagenes"] as IEnumerable<SelectListItem>, new { @class = "span10" })%>

				<h3>Tiempo <i class="icon-info-sign popover-help" data-content="El tiempo es en segundos desde el comienzo de capitulo. Por ejemplo si tenes el capitulo completo y la frase en el capitulo empieza a los 8:42, pones 522 (8*60+42)." data-original-title="Ayuda"></i></h3>
				<div class="input-append">
					<input id="Tiempo" name="Tiempo" value="<%= Model.Tiempo %>" type="text"/><span class="add-on" id="tiempo-mostrable">0:00</span>
				</div>

				<h3>Posteador</h3>
				<span class="span5 uneditable-input"><%= Model.Posteador %></span>

				<h3>Captcha <i class="icon-info-sign popover-help" data-content="Comproba que sos humano." data-original-title="Ayuda"></i></h3>
				<%= Html.GenerateCaptcha() %>

				<input class="btn btn-large btn-success top-space" type="submit" value="Agregar" />

			</div>

		</div>
	
	</form>

	<script type="text/javascript">
	<!--
		$(document).ready(function () {
			$(".popover-help").popover({ placement: 'right' });
		});
	//-->
	</script>

</asp:Content>
